<template>
  <div>
    <top :f1="true" :f2="false"></top>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in GoodsImages" :key="item.id">
        <img v-lazy="item" />
      </van-swipe-item>
    </van-swipe>
    <div class="goodInfo">
      <div class="goodInfo-title ">{{ GoodsDetail.title }}</div>
      <p>
        市场价:
        <span>¥{{ GoodsDetail.market_price }}</span>
        销售价: <em>¥{{ GoodsDetail.sell_price }}</em>
      </p>
      <div class="count">
        <span>购买数量</span>
        <van-stepper
          v-model="value"
          input-width="40px"
          button-size="32px"
          min="1"
          :max="GoodsDetail.stock_quantity"
        />
      </div>
      <div class="btns">
        <van-button type="info">立即购买</van-button>
        <van-button type="danger" @click="setCarArr({id: $route.params.id, cou: value, price:GoodsDetail.sell_price })">加入购物车</van-button>
      </div>
    </div>
    <div class="goodsParams">
      <div class="title">商品参数</div>
      <div class="xx">
        <p>商品货号: {{ GoodsDetail.goods_no }}</p>
        <p>库存情况: {{ GoodsDetail.stock_quantity }}件</p>
        <p>上架时间: {{ GoodsDetail.add_time }}</p>
      </div>
      <div class="btn">
        <van-button plain hairline type="info" size="large"
          >图文介绍</van-button
        >
        <van-button plain hairline type="danger" size="large"
          >商品评论</van-button
        >
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      GoodsImages: [],
      GoodsDetail: {},
      value: 1
    }
  },
  created() {
    this.getGoodsImages()
    this.getDetail()
  },
  methods: {
    ...mapMutations(['setCarArr']),
    async getGoodsImages() {
      const { data: res } = await this.axios.get(
        '/api/getthumimages/' + this.$route.params.id
      )
      if (res.status !== 0) {
        return this.$toast('获取轮播图失败')
      }
      this.GoodsImages = res.message
    },
    async getDetail() {
      const { data: res } = await this.axios.get(
        '/api/goods/getinfo/' + this.$route.params.id
      )
      console.log(res)
      if (res.status !== 0) {
        return this.$toast('获取商品详情失败')
      }
      this.GoodsDetail = res.message[0]
    }
  }
}
</script>

<style lang="less" scoped>
.van-swipe {
  height: 230px;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: relative;
  top: 50px;
  margin: 0 10px;
  img {
    width: 200px;
    height: 200px;
    display: block;
    margin: auto;
  }
}
.goodInfo {
  margin: 70px 10px 10px;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  .goodInfo-title {
    border-bottom: 1px solid #ccc;
  }
  p {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #8f8f94;
    span {
      text-decoration: line-through;
      margin: 0 10px;
    }
    em {
      font-weight: 700;
      font-size: 16px;
      color: red;
      font-style: normal;
    }
  }
  .count {
    padding: 10px;
    span {
      font-size: 14px;
      color: #8f8f94;
    }
    .van-stepper {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
  .btns {
    .van-button {
      margin: 3px 3px;
      height: 33px;
      line-height: 33px;
    }
  }
}
.goodsParams {
  margin: 0 10px;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  .title {
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .xx {
    border-bottom: 1px solid #ccc;
    padding: 15px;
    p {
      font-size: 14px;
      margin: 10px 0;
      color: #8f8f94;
    }
  }
  .btn {
    margin-top: 10px;
    .van-button {
      height: 39px;
      line-height: 39px;
      border-radius: 5px;
      margin: 5px 0;
    }
  }
}
</style>
